<div
  #tagsInputWrapper
  class="devui-tags-host {{ multiline ? 'multi-inline' : 'init-inline' }}"
  [class.devui-gray-style]="styleType === 'gray'"
  [class.disabled]="disabled || selectedItems?.length >= maxTags"
  tabindex="-1"
  (click)="host_click()"
>
  <d-toggle-menu-container
    [isOpen]="isOpen"
    [appendToBody]="appendToBody"
    [appendToBodyDirections]="appendToBodyDirections"
    [appendToBodyScrollStrategy]="appendToBodyScrollStrategy"
    [selectWrapper]="tagsInputWrapperItem"
    [disabled]="disabled || selectedItems?.length >= maxTags"
    [paused]="!showSuggestion"
    [toggleOnFocus]="true"
    [showAnimation]="showAnimation"
    [closeScope]="'blank'"
    (passEvent)="passEvent($event)"
    (toggleChange)="toggleChangeFn($event)"
  >
    <d-toggle-menu-label
      [multiItems]="selectedItems"
      [valueParser]="valueParser"
      [disabled]="disabled"
      [maxHeight]="maxHeight"
      [maxWidth]="'100%'"
      [mode]="multiline ? 'multiple-line' : 'scroll-y'"
      [customViewTemplate]="tagTemplate"
      (removeChange)="removeTag($event)"
    ></d-toggle-menu-label>
    <d-toggle-menu-search
      *ngIf="!disabled || selectedItems?.length === 0"
      [inputValue]="newTag"
      [maxLength]="maxLength"
      [searchPlaceholder]="getPlaceHolder"
      [searchFn]="searchFn"
      [spellcheck]="spellcheck"
      [isShowSearchIcon]="false"
      [disabled]="disabled || selectedItems?.length >= maxTags"
      [delay]="0"
      (searchInputValueChange)="searchInputValueChange($event)"
    ></d-toggle-menu-search>
    <d-toggle-menu-list
      [eventHandle]="inputEvent"
      [options]="availableOptions"
      [value]="selectedItems"
      [virtualScroll]="virtualScroll"
      [hasSelectIndex]="true"
      [isFiltering]="newTag?.length > 0"
      [listItemTemplate]="listItem"
      [noResultItemTemplate]="noResultItemTemplate"
      [closeScope]="'blank'"
      (toggleChange)="toggleChangeFn($event)"
      (valueChange)="setValue($event)"
    >
      <ng-template #listItem let-item="item" let-index="index" let-selectIndex="selectIndex" let-choose="choose">
        <d-toggle-menu-list-item
          [item]="item"
          [index]="index"
          [selectIndex]="selectIndex"
          [highlightToggle]="false"
          [customTemplate]="itemTemplate"
          [filterKey]="displayProperty"
          (chooseItem)="choose($event)"
        >
          <span itemSuffix *ngIf="index === 0 && item.option.isDevuiTagsInputCreated" class="devui-tags-create-item">
            {{ i18nTagsInputText?.create }}
          </span>
        </d-toggle-menu-list-item>
      </ng-template>
    </d-toggle-menu-list>
  </d-toggle-menu-container>
</div>
